import React, { useEffect } from "react";

function Home() {
  useLoggingLife("Home");

  return (
    <div>
      <h2>Home </h2>
    </div>
  );
}

function Profile() {
  useLoggingLife("Profile");

  return (
    <div>
      <h2>Profile </h2>
    </div>
  );
}

export default function CustomLifeHookDemo01() {
  // useEffect(() => {
  //   console.log("CustomLifeHookDemo01 组件被创建");

  //   return () => {
  //     console.log("CustomLifeHookDemo01 组件被销毁");
  //   };
  // }, []);
  useLoggingLife("CustomLifeHookDemo01");

  return (
    <div>
      <h2>CustomLifeHookDemo01</h2>
      <Home></Home>
      <Profile></Profile>
    </div>
  );
}

function useLoggingLife(name) {
  useEffect(() => {
    console.log(`${name}组件被创建`);
    return () => {
      console.log(`${name}组件被销毁`);
    };
  }, []);
}
